<template>
    <div class="top-bitmap">
        <div class="left">
            <p>潜在商机推送</p>
            <p>根据历史招投标数据建模推送潜在商机项目信息</p>
            <p>
                你有<span> {{businessnum}} </span>个潜在商机
            </p>
        </div>
        <div class="middle">
            <p>潜在人脉名单</p>
            <p>上下游潜在客户全面获取建立项目人脉圈</p>
            <p>
                你有<span> {{possiblenum}} </span>个潜在人脉
            </p>
        </div>
        <div class="right">
            <p>信息越精确服务内容越精细</p>
            <el-button @click="handlerClick" v-czc="['商机人脉圈', '打开弹窗' , '商机人脉设置',0 ,'businessContact-dialog-set']">商机人脉设置</el-button>
        </div>

    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    components: {
       
    },
    async asyncData(context) {},
    props: {
        businessnum:{
            type:Number,
            default:0,
        },
        possiblenum:{
            type:Number,
            default:0,
        }
    },
    data() {
        return {
            val:'',
        };
    },
    computed: {
       
    },
    methods: {
        ...mapActions({
            openGlobalDialog: 'global-dialog/openGlobalDialog',
        }),
        handlerClick:function(){
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.openGlobalDialog({
                    name: 'supplement',
                });
            });
        },
    },
    mounted() {
        
        
    },
    created() {

    },


};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.top-bitmap {
    animation: top-bitmap  0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    height: 108px;
    background-image: url('../../../assets/images/business-contact/bitmap1.png');
    background-repeat:no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 0 36px;
    color: white;
    line-height: 1.8em;
    
    .left{
        width: 400px;
        p:nth-child(1){
            font-size: 17px;
        }
        p:nth-last-child(1){
            span{
                color: #f9a708;
                font-size: 17px;
            }
        }
    }
    .middle{
        flex: 1;
        p:nth-child(1){
            font-size: 17px;
        }
        p:nth-last-child(1){
            span{
                color: #f9a708;
                font-size: 17px;
            }
        }
    }

    .right{
        text-align: center;
        p{
            font-size: 17px;
        }
        .el-button{
            padding: 0;
            width: 120px;
            height:36px;
            background-color: #f9a708;
            border: 1px solid #f9a708;
            color:white;
            margin-top: 10px;
        }
    }

    @keyframes top-bitmap {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

}
</style>
